<template>
    <div >
        <div class="image-main" :style="'background-image: url('+url+');height:'+height+'px'" >
            <div class="image-mask">
                <slot>

                </slot>
                
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:['url','height'],
    methods:{

    },
    created(){
        if(this.height){
            this.height=500
        }
        // this.iamgeUrl='https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-checkout.jpg'
    }

}
</script>

<style lang="scss" scoped>
.image-mask{

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
}
.image-main{
    width: 100%;
    background-position:center;
    background-size: 100% 100%;
    background-repeat:no-repeat;

}
</style>>

</style>